<template>
    <el-container style="height: 100%;">
      <el-aside width="200px" 
      :style="{ backgroundColor: '#242c44' }"
      
        >
          <!-- 一级菜单标签  el-submenu -->
          <!-- 二级菜单标签  el-menu-item -->
          <el-menu
        default-active="2"
        background-color="#242c44"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span>{{menu.name}}</span>
          </template>
          
            <el-menu-item :index="ch.id+''"  v-for="ch in menu.childrenMenu" :key="ch.id" @click="handleRoute(ch)">{{ch.name}}</el-menu-item>
  
        </el-submenu>
       
      </el-menu>
      </el-aside>
      <el-container>
      
      <el-header style="background-color:white; height: 10%; " >
      </el-header>
      <el-main >
      <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        menuList:[
        {id:25,name:'下订单',icon:'el-icon-s-custom',
            childrenMenu:[{id:26,name:'增加订单',url:'/26'},{id:27,name:'支付订单',url:'/27'}]
        },
        {id:10,name:'订单监控',icon:'el-icon-s-custom',
            childrenMenu:[{id:11,name:'订单统计',url:'/11'},{id:12,name:'订单日志',url:'/12'}]
        },






        {id:4,name:'售后管理',icon:'el-icon-s-custom',
            childrenMenu:[{id:5,name:'售后列表',url:'/aftersaleList'},{id:6,name:'测试地图',url:'/mapList'},{id:111,name:'创建物流测试',url:'/createLogistics',
         
            }  , {id:112,name:'全球订单地图',url:'/watchOrder'}]
        },



        // {id:7,name:'系统管理',icon:'el-icon-s-custom',
        //     childrenMenu:[{id:8,name:'学员信息'},{id:9,name:'考情记录'}]
        // },
        // {id:10,name:'订单监控',icon:'el-icon-s-custom',
        //     childrenMenu:[{id:11,name:'学员信息'},{id:12,name:'考情记录'}]
        // },



        {id:13,name:'物流管理',icon:'el-icon-s-custom',
            childrenMenu:[{id:14,name:'扫描订单导入',url:'/logisticsScanning'},{id:11,name:'物流列表',url:'/lll'}]
        },
        {id:22,name:'营销活动',icon:'el-icon-s-custom',
            childrenMenu:[{id:23,name:'优惠卷管理',url:'/aaa'},{id:24,name:'优惠活动',url:'/couponList'}]
        },




        {id:16,name:'发票管理',icon:'el-icon-s-custom',
            childrenMenu:[{id:17,name:'学员信息'},{id:18,name:'考情记录'}]
        },
        // {id:19,name:'支付管理',icon:'el-icon-s-custom',
        //     childrenMenu:[{id:20,name:'学员信息'},{id:21,name:'考情记录'}]
        // },




        {id:88,name:'客服',icon:'el-icon-s-custom',
            childrenMenu:[{id:89,name:'智能客服',url:'/chatkefu'},{id:90,name:'绘画',url:'/image'}]
        },
        {id:91,name:'ocr',icon:'el-icon-s-custom',
            childrenMenu:[{id:92,name:'ocr文件录入',url:'/file'},{id:93,name:'ocr文件查询',url:'/text'}]
        },
        ]
      }
    },
  
    methods: {
    handleRoute(ch){
     let currentUrl=this.$route.path
     if(currentUrl!==ch.url){
     this.$router.push(ch.url)
     }},
        queryMenu(){
            // 查询用户菜单请求
            this.$axios.get('api/menu/queryMenu/'+this.userRoleId)
            .then(resp=>{
                console.log(resp.data);
                if (resp.data.code==200) {
                    // this.menuList=resp.data.data
                }             
            })
        }
    },
    created(){

    }
  }
  </script>

  <style scoped>
.el-menu--vertical .el-submenu .el-menu {
  border-right: none; /* 移除右侧竖线 */
}
.el-header {
  /* background-image: url('@/assets/head.jpg') ;background-size: 100% auto;   background-position: center;background-repeat: no-repeat; */
}
        
  </style>